<template>
  <div class="login-wrap" avalonctrl="vmRegistration">
    <div class="login-list">
      <h2>找回密码</h2>
      <div id="reg" class="form">
        <div>
          <label>手机号：</label>
          <input type="number" v-model="tel" id="mobile" name="mobile">
          <span>请正确填写注册时的手机号</span>
        </div>
        <div class="input-yanz">
          <label>短信验证码：</label>
          <input type="text" v-model="msg" name="vcode">
          <button @click="sendMsg" type="button">{{getYzm}}</button>
          <span>请输入获取到的短信验证码</span>
        </div>
        <div>
          <label>新密码：</label>
          <input type="password" v-model="password" id="passwordConfirm" name="passwordConfirm">
          <span>请输入新设置的密码</span>
        </div>
        <div>
          <label>确认密码：</label>
          <input type="password" v-model="passwordRepeat" id="passwordConfirm2" name="passwordConfirm2">
          <span>请输入确认设置的密码</span>
        </div>
        <div class="form-group"></div>
        <button @click="reset" class="btn btn-zhuce" type="button" style="cursor: pointer">立即设置</button>
      </div>
    </div>
  </div>
</template>

<script>
import Axios from "@/common/js/Axios";
export default {
  data() {
    return {
      tel: "",
      msg: "",
      password: "",
      passwordRepeat: "",
      verificationKey: "",
      //处理60s验证码
      getYzm: "免费获取",
	  canSend: true,
	  tmpInterval:""
      //处理60s验证码
    };
  },
beforeDestroy() {
    clearInterval(this.tmpInterval);
  },
  methods: {
    //发送验证码
    sendMsg() {
      if (!this.canSend) {
        this.$message.error(`请等待${this.getYzm}后重发`);
        return false;
      }
      if (this.tel == "") {
        this.$message.error("电话号码不能为空");
        return false;
      }
      Axios.postAxios("/api/verificationCode/forgetPassword", {
        phone: this.tel
      }).then(
        res => {
          if (!res.data.status) {
            this.$message.error(res.data.msg);
          } else {
            this.canSend = false;
            this.$message.success(res.data.msg);
            this.verificationKey = res.data.data.verificationKey;
            let time = 60;
            this.tmpInterval = setInterval(() => {
              time--;
              this.getYzm = time;
              if (time == 0) {
                this.canSend = true;
                this.getYzm = "免费获取";
                clearInterval(tmpInterval);
              }
            }, 1000);
          }
        },
        err => {
          this.$message.error("发生未知错误");
        }
      );
    },
    //重置密码
    reset() {
      Axios.postAxios("/api/forgetPassword", {
        phone: this.tel,
        verificationKey: this.verificationKey,
        verificationCode: this.msg,
        password: this.password,
        passwordRepeat: this.passwordRepeat
      }).then(res => {
		  console.log(res);
        if (!res.data.status) {          
          this.$message.error(
            res.data.msg
          );
        } else {
          this.$message.success("密码重置成功,请重新登陆");
          this.$router.push("/login/login");
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~@/assets/login/css/register';
.btn-zhuce {
  margin: 30px auto !important;
  display: block;
}
.login-list .form > div {
  text-align: center;
}
</style>


